<template>
	<!--新增对话框-->
	<el-dialog
		:title="editForm.id ? '编辑用户' : '新增用户'"
		:visible.sync="dialogVisible"
		width="600px"
		:before-close="handleClose"
	>
		<el-form :model="editForm" :rules="editFormRules" ref="editForm">
			<el-form-item label="用户名" prop="username" label-width="100px">
				<strong v-if="editForm.id">{{ editForm.username}}</strong>
				<el-input v-else v-model="editForm.username" autocomplete="off"></el-input>
				<el-alert title="初始密码为888888" :closable="false" type="info" style="line-height: 12px"></el-alert>
			</el-form-item>

			<el-form-item label="密码" prop="password" label-width="100px">
				<el-input v-model="editForm.password" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="邮箱" prop="email" label-width="100px">
				<el-input v-model="editForm.email" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="手机号" prop="phone" label-width="100px">
				<strong v-if="editForm.id">{{ editForm.phone }}</strong>
				<el-input v-else v-model="editForm.phone" autocomplete="off" maxlength="11"></el-input>
			</el-form-item>
			<!-- <el-form-item label="身份" prop="isFarmer" label-width="100px">
				<el-radio-group v-model="editForm.isFarmer" @change="isFarmerChange">
					<el-radio :label="1">平台</el-radio>
					<el-radio :label="2">农场</el-radio>
				</el-radio-group>
			</el-form-item> -->

			<el-form-item label="头像" prop="avatar" label-width="100px">

				<el-upload
				class="upload-demo"
				drag
				:action="actionUrl"
				:headers="actionHeaders"
				:with-credentials="true"
				:on-success="okHandler"
				:on-error="errorHandler"
				:show-file-list="true"
				>
					<img v-if="editForm.avatar" :src="editForm.avatar" class="avatar">
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
			</el-form-item>
			<el-form-item label="状态" prop="statu" label-width="100px">
				<el-radio-group v-model="editForm.statu">
					<el-radio :label="0">禁用</el-radio>
					<el-radio :label="1">正常</el-radio>
				</el-radio-group>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="resetForm('editForm')">取 消</el-button>
			<el-button type="primary" @click="submitForm('editForm')">确 定</el-button>
		</div>
	</el-dialog>
</template>

<script>
import VploadImg from '../inc/VploadImg';
import { getApiPre, getResourceUrl } from '@/utils/index';
export default {
	name: 'AddUpdateUser',
	components: {
		VploadImg,
	},
	data() {
		return {
			farmList: [],
			isFarmer: false,
			editForm: {},
			avatar: '',
			loading: false,
			fileList: [],
			dialogVisible: false,
			editFormRules: {
				username: [{ required: true, message: '请输入用户名称', trigger: 'blur' }],
				email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
				statu: [{ required: true, message: '请选择状态', trigger: 'blur' }],
				isFarmer: [{ required: true, message: '请选择身份', trigger: 'blur' }],
			},
            actionUrl: `${getApiPre()}/admin/boat/upload`,
            actionHeaders:  {
                Authorization: localStorage.getItem('token'), // 请求头带上token
            },
		};
	},
	mounted() {
		// this.getFarmList('');
	},

	methods: {
		resetForm(formName) {
			this.$refs[formName].resetFields();
			this.dialogVisible = false;
			this.editForm = {};
			this.fileList = [];
		},
		handleClose() {
			this.resetForm('editForm');
		},
		submitForm(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					const isEdit = !!(this.editForm.id);

					this.$axios
						.post('/admin/user/' + (this.editForm.id ? 'update' : 'save'), this.editForm)
						.then((res) => {
							this.$message({
								showClose: true,
								message: '恭喜你，操作成功',
								type: 'success',
								onClose: () => {
									this.$emit('refreshDataList');
								},
							});
							this.dialogVisible = false;
							this.resetForm(formName);
						});
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		getImgList(url, add) {
			if (add == 1) {
				this.editForm.avatar = url;
			} else if (add == 0) {
				this.editForm.avatar = '';
			}
		},
		init(id) {
			this.dialogVisible = true;
			if (id != null && id != '' && id > 0) {
				this.$axios.get('/admin/user/info/' + id).then((res) => {

					// 过滤掉密码
					const {password,avatar, username, email,id,statu, ...rest} = res.data;
					this.editForm = {
						id,
						username,
						avatar,
						email,
						statu,
					};
					if (this.editForm.isFarmer == 2) {
						this.isFarmer = true;
					}
				});
			}
		},
		// getFarmList(query){
		//     this.loading = true;
		//     setTimeout(() => {
		//         this.loading = false;
		//         var  data={farmName:query};
		//         this.$axios.post('/admin/user/getFarmList',data).then(res=>{
		//             this.farmList=res.data;
		//         })
		//     }, 200);

		// },
		isFarmerChange() {
			if (this.editForm.isFarmer == 2) {
				this.isFarmer = true;
			}
		},

        okHandler(res){
			this.$message({
				type: res.success ? 'success' : 'warning',
				message: res.message
			});
            if(res.success){
				this.editForm.avatar = getResourceUrl(res.result.file_name);
            }
		},
        errorHandler(err){
            this.$message({
                type: 'warning',
                message: '对不起，请稍后再试',
            });
        },
	},
};
</script>

<style scoped>
.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}
.avatar-uploader .el-upload:hover {
	border-color: #409eff;
}
.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	line-height: 178px;
	text-align: center;
}
.avatar {
	width: 178px;
	height: 178px;
	display: block;
}
</style>
